import React, { Component,useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Line } from '@ant-design/plots';
import {Card, Col, Row, Space} from "antd";

const DemoLine = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    asyncFetch();
  }, []);

  const asyncFetch = () => {
    // fetch('https://gw.alipayobjects.com/os/bmw-prod/55424a73-7cb8-4f79-b60d-3ab627ac5698.json')
    //   .then((response) => response.json())
    //   .then((json) => setData(json))
    //   .catch((error) => {
    //     console.log('fetch data failed', error);
    //   });
    const data = [
      {
        "year": 2015,
        "value": 111,
        "rank": "软科"
      },
      {
        "year": 2016,
        "value": 131,
        "rank": "软科"
      },
      {
        "year": 2017,
        "value": 129,
        "rank": "软科"
      },
      {
        "year": 2018,
        "value": 135,
        "rank": "软科"
      },
      {
        "year": 2019,
        "value": 139,
        "rank": "软科"
      },
      {
        "year": 2020,
        "value": 87,
        "rank": "软科"
      },
      {
        "year": 2021,
        "value": 78,
        "rank": "软科"
      },
      {
        "year": 2022,
        "value": 75,
        "rank": "软科"
      },
      {
        "year": 2015,
        "value": 120,
        "rank": "ESI"
      },
      {
        "year": 2016,
        "value": 124,
        "rank": "ESI"
      },
      {
        "year": 2017,
        "value": 112,
        "rank": "ESI"
      },
      {
        "year": 2018,
        "value": 134,
        "rank": "ESI"
      },
      {
        "year": 2019,
        "value": 119,
        "rank": "ESI"
      },
      {
        "year": 2020,
        "value": 77,
        "rank": "ESI"
      },
      {
        "year": 2021,
        "value": 66,
        "rank": "ESI"
      },
      {
        "year": 2022,
        "value": 54,
        "rank": "ESI"
      },
      {
        "year": 2015,
        "value": 55,
        "rank": "武书连"
      },
      {
        "year": 2016,
        "value": 63,
        "rank": "武书连"
      },
      {
        "year": 2017,
        "value": 70,
        "rank": "武书连"
      },
      {
        "year": 2018,
        "value": 66,
        "rank": "武书连"
      },
      {
        "year": 2019,
        "value": 50,
        "rank": "武书连"
      },
      {
        "year": 2020,
        "value": 62,
        "rank": "武书连"
      },
      {
        "year": 2021,
        "value": 59,
        "rank": "武书连"
      },
      {
        "year": 2022,
        "value": 54,
        "rank": "武书连"
      },
    ];
    setData(data)
  };
  const config = {
    data,
    legend: false,
    xField: 'year',
    yField: 'value',
    height: 220,
    seriesField: 'rank',
    meta: {
      // value: {alias: '软科排名'}
    },
    xAxis: {
      // type: 'time',
    },
  };

  return <Line {...config} />;
};

class ScoreLineCharts extends Component {
  render() {
    return (
      <>
        <Card headStyle={{fontWeight: 'bold'}} size="small" title="院校排名">
          <DemoLine/>
        </Card>
      </>
    );
  }
}

export default ScoreLineCharts;